<template>
  <div>
    <template>
      <!-- 一条文章单元格 -->
      <van-cell @click="toDetail(item.art_id)">
        <!-- 标题区域的插槽 -->
        <template #title>
          <div class="title-box">
            <!-- 标题 -->
            <span>{{ item.title }}</span>
            <!-- 单图 -->
            <img
              class="thumb"
              v-if="item.cover.type === 1"
              v-lazy="item.cover.images[0]"
            />
          </div>
          <!-- 三张图片 -->
          <div class="thumb-box" v-if="item.cover.type > 1">
            <img
              class="thumb"
              v-for="(imgUrl, index) in item.cover.images"
              :key="index"
              v-lazy="imgUrl"
            />
          </div>
        </template>
        <!-- label 区域的插槽 -->
        <template #label>
          <div class="label-box">
            <div>
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }} 评论</span>
              <span>{{ item.pubdate }}</span>
            </div>
            <!-- 反馈按钮 -->
            <van-icon
              name="cross"
              @click.stop="show = true"
              v-if="isShow"
              get-container="body"
            />
          </div>
        </template>
      </van-cell>
    </template>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      :cancel-text="bottomText"
      @select="onSelect"
      get-container="body"
      @cancel="cancel"
      @close="close"
    />
  </div>
</template>
<script>
import { firstActions, secondActions } from '@/utils/report.js'
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 反馈面板显示/隐藏
      show: false,
      // 反馈面板选项数组
      actions: firstActions,
      // 底部按钮的文字
      bottomText: '取消'
    }
  },
  created() {},
  methods: {
    // action 绑定的对象
    // item 索引值
    onSelect(action, item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      if (item === 0) {
        this.$emit('disLikeEV', this.item.art_id)
        this.show = false
      } else if (item === 1) {
        this.actions = secondActions
        this.bottomText = '返回'
      } else {
        this.$emit('reports', this.item, action.value)
        this.actions = firstActions
        this.show = false
      }

      // this.show = false
    },
    // 底部按钮
    cancel() {
      if (this.bottomText === '返回') {
        this.actions = firstActions
        // 强制回到前面的面板
        this.show = true
        this.bottomText = '取消'
      }
    },
    // 关闭面板回复第一版面板
    close() {
      this.actions = firstActions
      this.bottomText = '取消'
    },
    // 跳转文章内容
    toDetail(id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })
    }
  }
}
</script>
<style lang="less" scoped>
/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  itemect-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
.label-box {
  display: flex;
  justify-content: space-between;
}
</style>
